<template>
  <div >
    <el-container>
      <el-header>
      <el-menu
          style="padding:5mm"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-row>
          <el-col :span="4"><h1 align="center">影院订票系统</h1></el-col>
          <el-col :span="2"><el-menu-item index="1" @click="$router.push('/')"  align="center">首页</el-menu-item></el-col>
          <el-col :span="2"><el-menu-item index="2" @click="$router.push('/center')" align="center">个人中心</el-menu-item></el-col>
          <el-col :span="12"><b>&nbsp</b></el-col>
          <el-col :span="2"><el-menu-item index="3"  align="center">{{ user.nickname}}</el-menu-item></el-col>
          <el-col :span="2"><el-menu-item index="4" @click="$router.push('/login')"  align="center">登出</el-menu-item></el-col>
        </el-row>
      </el-menu>
    </el-header>
      <el-main>

    <el-descriptions class="margin-top" title="基本信息" :column="3" :size="size" border style="padding-top: 28px;">
      <template slot="extra">
        <el-button type="primary" size="small" @click="dialogFormVisible = true">修改</el-button>
          <el-dialog title="修改信息" :visible.sync="dialogFormVisible"  >
              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" :rules="rule">
                  <el-form-item label="昵称 " prop="nickname">
                      <el-input v-model="formLabelAlign.nickname" placeholder="请输入昵称"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                              <el-select v-model="formLabelAlign.gender" placeholder="请输入性别">
                                  <el-option label="男" value="男"></el-option>
                                  <el-option label="女" value="女"></el-option>
                              </el-select>
                  </el-form-item>
                  <el-form-item label="电子邮箱" prop="email">
                      <el-input v-model="formLabelAlign.email" placeholder="请输入电子邮箱"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" prop="phoneNumber">
                      <el-input v-model="formLabelAlign.phoneNumber" placeholder="请输入联系方式"></el-input>
                  </el-form-item>
                  <el-form-item label="个人简介">
                      <el-input type="textarea" v-model="formLabelAlign.userDescription" placeholder="请输入个人简介" maxlength="30" show-word-limit></el-input>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="save()">确 定</el-button>
              </div>
          </el-dialog>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        <!--            {{form}}-->
        {{ user.userName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          昵称
        </template>
        <!--            {{form}}-->
        {{ userdata.nickname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          性别
        </template>
        <!--            {{form}}-->
        {{ userdata.gender }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          注册时间
        </template>
        <!--            {{form.time}}-->
        {{user.registTime}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-order"></i>
          身份证号
        </template>
        <!--            {{form.time}}-->
        {{ user.idNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          电子邮箱
        </template>
        {{ userdata.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          联系方式
        </template>
        <!--            {{form}}-->
        {{ userdata.phoneNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          身份
        </template>
          {{ userdata.nickname }}
        <!--            {{form}}-->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          个人简介
        </template>
        <!--            {{form}}-->
        {{userdata.userDescription}}
      </el-descriptions-item>
    </el-descriptions>
    <el-row border style="padding-top: 28px; padding-bottom: 28px">
        <el-button type="danger" @click="passwordFormVisible = true">修改密码</el-button>

        <el-dialog title="修改密码" :visible.sync="passwordFormVisible">
                <el-form label-width="120px" size="small" :model="form" :rules="rules" ref="pass">

                    <el-form-item label="原密码" :label-width="formLabelWidth" prop="password">
                        <el-input v-model="form.password" autocomplete="off" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPassword">
                        <el-input v-model="form.newPassword" autocomplete="off" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" :label-width="formLabelWidth" prop="confirmPassword">
                        <el-input v-model="form.confirmPassword" autocomplete="off" show-password></el-input>
                    </el-form-item>
                </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="passwordFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changepass">确 定</el-button>
            </div>
        </el-dialog>

    </el-row>
          <div style="padding-bottom: 14px">我的订单</div>
        <el-table
            :header-cell-style="headStyle"
            :data="tableData"
            stripe
            border
            style="width: 100%;">
              < <el-table-column
            prop="id"
            label="订单号"
            width="150">
        </el-table-column>
          <el-table-column
              prop="roomnId"
              label="影厅"
              width="120">
          </el-table-column>
          <el-table-column
              prop="film"
              label="电影"
              width="120">
          </el-table-column>
          <el-table-column
              prop="time"
              label="时间">
          </el-table-column>
          <el-table-column
              prop="status"
              label="支付状态"
              width="300">
          </el-table-column>
          <el-table-column
              prop="cost"
              label="价格"
              width="120">
          </el-table-column>
          <el-table-column
              align="center"
              label="操作"
              width="400">
                  <template slot-scope="scope">
                      <!--        使用v - if 判断订单条件 控制不同功能        -->
                      <el-popconfirm
                              confirm-button-text='确定'
                              cancel-button-text='取消'
                              icon="el-icon-info"
                              icon-color="red"
                              title="是否支付"
                      >
                          <el-button slot="reference">支付</el-button>
                      </el-popconfirm>
                      <el-popconfirm
                              confirm-button-text='是的'
                              cancel-button-text='不用了'
                              icon="el-icon-info"
                              icon-color="red"
                              title="是否确定取消？"
                      >
                          <el-button slot="reference">取消</el-button>
                      </el-popconfirm>
                      <el-popconfirm
                              confirm-button-text='好的'
                              cancel-button-text='不用了'
                              icon="el-icon-info"
                              icon-color="red"
                              title="确定退款？"
                      >
                          <el-button slot="reference">退款</el-button>
                      </el-popconfirm>
                      <!--                <el-button v-if="" @click="" type="text" size="small">支付</el-button>-->
                      <!--                <el-button v-if=""@click="" type="text" size="small">取消</el-button>-->
                      <!--                <el-button v-if=""@click="" type="text" size="small">退款</el-button>-->
                  </template>
              </el-table-column>

          </el-table>
      </el-main>
    </el-container>

  </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
     methods: {
       handleSelect(key, keyPath) {
         console.log(key, keyPath);
       },
       changepass(){
           if(this.form.newPassword!=this.form.confirmPassword){
               this.$message.error("两次输入密码不一致，请重新输入")
           }else{
               request.get("/user/changepass",{
                   params: {
                       userId: this.user.userId,
                       password: this.form.password,
                       newpassword: this.form.newPassword


                   }
               }).then((res) =>{
                   if (res.code == 200) {
                       this.passwordFormVisible = false
                       this.$message.success(res.mes)
                   } else {
                       this.$message.error(res.mes);
                   }

               })
           }


       },
       save() {
           request.get("/user/edit",{
               params: {
                   userId: this.user.userId,
                   nickname: this.formLabelAlign.nickname,
                   gender: this.formLabelAlign.gender,
                   email: this.formLabelAlign.email,
                   userDescription: this.formLabelAlign.userDescription,
                   phoneNumber: this.formLabelAlign.phoneNumber,


               }
           }).then((res) =>{
               this.dialogFormVisible=false;
               if (res.code == 200) {
                   this.$message.success(res.mes)
                   this.load()

               } else {
                   this.$message.error(res.mes);
               }

           })
       },
         load(){
             request.get("/user/select",{
                 params: {
                     userId: this.user.userId,
                 }
             }).then((res) =>{
                 if (res.code == 200) {
                    this.userdata.userName = res.data.username;
                    this.userdata.nickname= res.data.nickname;
                    this.userdata.gender= res.gender;
                    this.formLabelAlign.gender = res.gender;
                    this.userdata.registTime= res.data.registTime;
                    this.userdata.idNumber= res.data.idNumber;
                    this.userdata.email= res.data.email;
                    this.userdata.phoneNumber= res.data.phoneNumber;
                    this.userdata.identity= res.identity;
                    this.userdata.userDescription= res.data.userDescription;
                     this.formLabelAlign.nickname = res.data.nickname
                     // if(user.gender ==0){
                     //     this.formLabelAlign.gender = '男'
                     // }
                     // if(user.gender ==1){
                     //     this.formLabelAlign.gender = '女'
                     //
                     // }

                     this.formLabelAlign.email = res.data.email
                     this.formLabelAlign.phoneNumber = res.data.phoneNumber
                     this.formLabelAlign.userDescription = res.data.userDescription

                 }

             })
         },
       handleClick(row) {
        console.log(row);
       },
       headStyle(){
         return "text-align:center"
       }
     },
        created() {

            this.form.username = this.user.username
            this.formLabelAlign.nickname = this.user.nickname
            // if(user.gender ==0){
            //     this.formLabelAlign.gender = '男'
            // }
            // if(user.gender ==1){
            //     this.formLabelAlign.gender = '女'
            //
            // }

            this.formLabelAlign.email = this.user.email
            this.formLabelAlign.phoneNumber = this.user.phoneNumber
            this.formLabelAlign.userDescription = this.user.userDescription
            this.load()

        },
        data() {
            return {
              user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                size: "",
                passwordFormVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    password:'',
                    newPassword:'',
                    confirmPassword: '',


                },
                userdata: {
                  userName: '',
                  nickname: '',
                  gender: '',
                  registTime: '',
                  idNumber:'',
                  email: '',
                  phoneNumber: '',
                  identity:'',
                  userDescription:'',


                },
                tableData: [{
                    id: '1',
                    roomNumber: '1',
                    film: '封神',
                    time: '2022/9/2-20:00',
                    status: '未支付',
                    cost: '40.5'
                }],
                formLabelAlign: {
                    nickname: null,
                    gender: null,
                    email: null,
                    userDescription: null,
                    phoneNumber: null,
                },
                labelPosition: 'right',
                formLabelWidth: '120px',
                rules: {
                    password: [
                        { required: true, message: '请输入原密码', trigger: 'blur' },
                        { min: 3, message: '长度不少于3位', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 3, message: '长度不少于3位', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 3, message: '长度不少于3位', trigger: 'blur' }
                    ],

                },
                rule: {
                    nickname: [
                        {pattern:/^[\a-\z\A-\Z0-9\u4e00-\u9fe5]+$/,message: '仅能输入中文，数字，英文'}
                    ],
                    email: [{
                        pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/, message: '请输入有效邮箱',trigger: 'blur'
                    }],
                    phoneNumber:[
                        { min: 11, max: 11, message: '手机号应为11位' },
                        {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message:'请输入有效手机号'}
                    ]
                }
            };
        },

    };
</script>
<!--<script>-->
<!--    export default {-->
<!--        name:'changeinformation',-->
<!--        data() {-->
<!--                return {-->
<!--                    labelPosition: 'right',-->
<!--                    formLabelAlign: {-->
<!--                        name: '132',-->
<!--                        region: '123',-->
<!--                        type: '511'-->
<!--                    },-->
<!--                    form: {-->
<!--                    },-->
<!--                dialogFormVisible: false,-->
<!--                formLabelWidth: '120px',-->
<!--            };-->
<!--        }-->
<!--    };-->
<!--</script>-->
<style>

.margin-top:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>